<template>
    <div>
        <el-form ref="form" :model="form" label-width="80px" style="margin-top: 50px;" >
  <el-form-item label="发送地址">
    <el-input v-model="form.name" style="width: 400px;"></el-input>
    <el-button size="small" style="margin-left: 20px;">抄送人</el-button>
  </el-form-item>

  <el-form-item label="抄送人"> 
    <el-input v-model="form.name" style="width: 400px;"></el-input>
  </el-form-item>
  <el-form-item label="发件标题"> 
    <el-input v-model="form.name" style="width: 400px;"></el-input>
  </el-form-item>
  <el-form-item label="发件内容"> 
    <el-input type="textarea" v-model="form.desc" style="width: 400px;"></el-input><br>
    <!-- <el-button style="background-color: #ccc;" size="mini">上传文件</el-button> -->

    <el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" style="background-color: #ccc;">点击上传</el-button>
</el-upload>

  </el-form-item>

  <el-form-item align="center">
    <el-button  style="background-color:rgb(229, 141, 229);color: white;">发送</el-button>
    <el-button type="primary">取消</el-button>
  </el-form-item>
  </el-form>
    </div>
</template>
<script>
export default {
    data() {
        return {
        fileList:[],

            form:{
            name:'',
            desc:'',
            }
        }
    },
    methods: {
        handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    },
}
</script>
<style>
    .sa{
    color: rgb(229, 141, 229);}
</style>